<template>
  <div id="app">
    <div id="container"></div>
  </div>
  <div class="zoom_controller">
    <button @click="zIn()">放大</button>
    <button @click="zOut()">缩小</button>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, reactive } from 'vue'

export default {
  setup () {
    const data = reactive({
      lat: 0,
      lon: 0,
      map: {}
    })

    AMapLoader.load({
      key: 'f76d4f59f0a16f228c4788f7e8bbd066',
      version: '1.4.15',
      plugins: ['AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        version: '1.1',
        plugins: [] // 需要加载的 AMapUI ui插件
      },
      Loca: {
        version: '1.3.2'
      }
    }).then((AMap) => {
      data.map = new AMap.Map('container', {})
      data.map.setZoomAndCenter(13, [data.lon, data.lat])
      data.map.setStatus({
        dragEnable: true,
        keyboardEnable: true,
        doubleClickZoom: true,
        zoomEnable: true,
        rotateEnable: true
      })
      data.map.on('click', (e) => {
        console.log(e)
        if (confirm('确定选择此位置?')) {
          console.log('ok')
        }
      })
      var mouseTool = new AMap.MouseTool(data.map)
      mouseTool.marker()
      var overlays = []
      mouseTool.on('draw', function (e) {
        overlays.push(e.obj)
      })
    }).catch(e => {
      console.log(e)
    })

    onMounted(() => {
      var w = window.innerWidth
      var h = window.innerHeight
      console.log(w, h)
      document.getElementById('container').style.width = w + 'px'
      document.getElementById('container').style.height = h + 'px'
      getCurrentPosition()
    })

    const zIn = () => {
      data.map.zoomIn()
    }
    const zOut = () => {
      data.map.zoomOut()
    }

    const getCurrentPosition = () => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
          console.log('test', position)
          data.lat = position.coords.latitude
          data.lon = position.coords.longitude
        })
      }
    }

    return {
      data,
      zIn,
      zOut
    }
  }
}
</script>

<style lang="less">
@w: 100%;
#container {

}

.amap-copyright {
  height: 0px;
}

.amap-logo {
  height: 0;
}

.zoom_controller {
  position: fixed;
  bottom: 15%;
  right: 5%;
}
</style>
